<template>
    <el-form
        :model="formData"
        class="form-inline"
        label-width="100px"
        status-icon
        :inline="true"
    >
        <el-row>
            <el-col :span="6">
                <el-form-item label="开始月份选择" prop="month">
                    <el-date-picker
                        v-model="formData.start_month"
                        type="month"
                        placeholder="选择月份"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="截止月份选择" prop="month">
                    <el-date-picker
                        v-model="formData.end_month"
                        type="month"
                        placeholder="选择月份"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="成本中心" prop="fee_owner">
                    <el-select
                        v-model="formData.fee_owner"
                        filterable
                        placeholder="select"
                        :clearable="true"
                    >
                        <el-option
                            v-for="optionvalue in cntrOwner"
                            :key="optionvalue.value"
                            :value="optionvalue.value"
                            :label="optionvalue.label"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <search-btn @click="onRefresh"></search-btn>
            </el-col>
        </el-row>
        <el-row>
            <v-chart class="row-chart" :option="inoutFeeOption" autoresize />
        </el-row>
        <el-row>
            <v-chart class="chart" :option="inTypeOption" autoresize />
            <v-chart class="chart" :option="outTypeOption" autoresize />
        </el-row>
    </el-form>
</template>
<script setup lang="ts" name="FeedetEcharts">
import { ref, reactive } from 'vue';
import { storeToRefs } from 'pinia';

import { use } from 'echarts/core';
import {
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
} from 'echarts/components';
import { LineChart, PieChart } from 'echarts/charts';
import { UniversalTransition, LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition,
    PieChart,
    LabelLayout,
]);

import VChart from 'vue-echarts';

import { Request } from '@/app/request';
import { useAppStore } from '@/store/app';
import type { BusiEchartsParam } from '@/common/types/report';
import SearchBtn from '@/components/button/SearchBtn.vue';
import { transFormatter } from '@/common/tools';
type monthStyle = {
    month: string; value: string
}
const { cntrOwner } = storeToRefs(useAppStore());
const formData = reactive<BusiEchartsParam>({
    start_month: new Date(),
    end_month: new Date(),
});
const inoutFeeOption = ref({
    title: {
        text: '业务应收付(按人民币计价)',
    },
    tooltip: {
        trigger: 'axis',
    },
    legend: {
        data: ['应收', '应付', '利润'],
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
    },
    toolbox: {
        feature: {
            saveAsImage: {},
        },
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
    },
    yAxis: {
        type: 'value',
    },
    series: [{}],
});
const onInOutFee = (
    infee: monthStyle[],
    outfee: monthStyle[],
) => {
    // inoutCntr
    const inData: number[] = [];
    const outData: number[] = [];
    const profitData: number[] = [];
    for (
        let index = 0;
        index < inoutFeeOption.value.xAxis.data.length;
        index++
    ) {
        const month = inoutFeeOption.value.xAxis.data[index] as string;
        let invalue = 0;
        let outvalue = 0;
        const infind = infee.find((e: any) => e.month === month);
        if (infind) {
            invalue = parseFloat(infind.value);
        } else {
            invalue = 0;
        }
        const outfind = outfee.find((e: any) => e.month === month);
        if (outfind) {
            outvalue = parseFloat(outfind.value);
        } else {
            outvalue = 0;
        }
        const profitvalue = invalue - outvalue;
        inData.push(invalue);
        outData.push(outvalue);
        profitData.push(profitvalue);
    }

    inoutFeeOption.value.series.push({
        name: '应收',
        type: 'line',
        data: inData,
    });
    inoutFeeOption.value.series.push({
        name: '应付',
        type: 'line',
        data: outData,
    });
    inoutFeeOption.value.series.push({
        name: '利润',
        type: 'line',
        data: profitData,
    });
    console.log(inoutFeeOption.value.series);
};
const inTypeOption = ref({
    title: {
        text: '业务应收(按人民币计价)分类',
    },
    tooltip: {
        trigger: 'item',
    },
    legend: {
        top: '5%',
        left: 'center',
    },
    series: [
        {
            name: '应收',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
            },
            label: {
                show: false,
                position: 'center',
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold',
                },
            },
            labelLine: {
                show: false,
            },
            data: [{}
                /* { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }, */
            ],
        },
    ],
});
const outTypeOption = ref({
    title: {
        text: '业务应付(按人民币计价)分类',
    },
    tooltip: {
        trigger: 'item',
    },
    legend: {
        top: '5%',
        left: 'center',
    },
    series: [
        {
            name: '应付',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
            },
            label: {
                show: false,
                position: 'center',
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold',
                },
            },
            labelLine: {
                show: false,
            },
            data: [{}
                /* { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }, */
            ],
        },
    ],
});
const onType = (data: {fee_typ_cod: string, value: string}[]) => {
    const seriesData: {
        name: string,
        value: number
    }[] = [];
    for (let index = 0; index < data.length; index++) {
        const element = data[index];
        // const typeName = transFormatter(element['fee_typ_cod'], feetyp.value);
        const typeName = '12312312';
        seriesData.push({
            name: typeName,
            value: parseFloat(element.value)
        })
    }
    return seriesData;
};
const onRefresh = async () => {
    const req = new Request('财务数据展示', {
        start_tim: formData.start_month,
        end_tim: formData.end_month,
        fee_owner: formData.fee_owner,
    });
    const r = await req.post();

    inoutFeeOption.value.xAxis.data.length = 0;
    inoutFeeOption.value.xAxis.data = r.ext;
    inoutFeeOption.value.series.length = 0;

    inTypeOption.value.series[0].data.length = 0;
    outTypeOption.value.series[0].data.length = 0;

    onInOutFee(r.obj.infee, r.obj.outfee);

    inTypeOption.value.series[0].data = onType(r.obj.inType);
    outTypeOption.value.series[0].data = onType(r.obj.outType);
    // console.log(inoutCntrOption.value.series);
};
</script>
<style lang="scss" scoped>
.form-inline .el-input {
    --el-input-width: 220px;
}

.form-inline .el-select {
    --el-select-width: 220px;
}
.chart {
    height: 50vh;
    width: 48%;
    margin: 0 5px 5px 0;
    border: solid 2px var(--el-color-primary);
    box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.5);
}
.row-chart {
    height: 50vh;
    width: 100%;
    margin: auto;
}
</style>
